function get_style(i,kind){
	if (window.getComputedStyle){
		return window.getComputedStyle(i,null).getPropertyValue(kind);
	}
	 if (i.currentStyle)
		return i.currentStyle[kind];
}
function style_changed(i,tle,clsname){
	i.title=tle;
	i.className=clsname;
	var result=false;
	if (get_style(i,"display")=="block")
		result=true;
	i.title="";
	i.className="";
	return result;
}

var $sc = style_changed;
var $gs = get_style;

function result_relationship_selector(result){
	var i1=document.createElement("div");
	document.body.appendChild(i1);
	var i2=document.createElement("a");
	var i3=document.createElement("p");
	var i4=document.createElement("test1");
	i1.appendChild(i2);
	i1.appendChild(i3);
	i1.appendChild(i4);

	result["E~F"] = $sc(i4,"","t1") ? true: false;
	document.body.removeChild(i1);
}

function result_attribute_selector(result){
	var i=document.createElement("test1");
	document.body.appendChild(i);

	result["E[att^='val']"] = !$sc(i,"aAxxddd","t2")&&$sc(i,"Axxxddd","t2") ? true : false;
	result["E[att$='val']"] = !$sc(i,"daagaBf","t3")&&$sc(i,"daagafB","t3") ? true: false;
	result["E[att*='val']"] = !$sc(i,"daacafs","t4")&&$sc(i,"daaCafs","t4") ? true: false;
	document.body.removeChild(i);
}

function result_pseudo_classes_selector(result){
	/////////   E:not()     /////////////
	var i=document.createElement("test2");
	var answer = false;
	document.body.appendChild(i);
	if(get_style(i,"display")=="block"){
		i.className="t5";
		if(get_style(i,"display")=="inline"){
			answer = true;
		}
	}
	result["E:not()"] = answer;
	document.body.removeChild(i);
	/////////     E:root()       //////
	var i1=document.createElement("test1");
		document.body.appendChild(i1);	
	answer = false;
	if(get_style(i1,"display")=="none"){
		i1.className="t6";
		if(get_style(i1,"display")=="block")
			answer = true;
	}
	result["E:root()"] = answer;
	document.body.removeChild(i1);
	//document.body.get
	//////E:last-child    E:only-child	 E:nth-child(n)   E:nth-last-child(n)//////
	var i=document.createElement("div");
	document.body.appendChild(i);
	var tmp=document.createElement("test3");
		i.appendChild(tmp);
	var answer_only=get_style(tmp,"color");
	tmp=document.createElement("p");
		i.appendChild(tmp);
	for(var x=1;x<6;x++){
	var tmp=document.createElement("test3");
		i.appendChild(tmp);
	}
	var iarray=i.getElementsByTagName("test3");
	//
	if(get_style(iarray[5],"color")=="rgb(10, 10, 10)")
		result["E:last-child"] = true;
	else if(get_style(iarray[5],"color")=="#101010")
		result["E:last-child"] = true;
	else
		result["E:last-child"] = false;
	//
	if($gs(iarray[0],"color")!="rgb(20, 20, 20)" && answer_only=="rgb(20, 20, 20)")
		result["E:only-child"] = true;
	else
		result["E:only-child"] = false;
	//
	if(get_style(iarray[2],"color")!="rgb(30, 30, 30)" && get_style(iarray[1],"color")=="rgb(30, 30, 30)")
		result["E:nth-child(n)"] = true;
	else
		result["E:nth-child(n)"] = false;
	//
	if(get_style(iarray[4],"color")=="rgb(40, 40, 40)")
		result["E:nth-last-child(n)"] = true;
	else
		result["E:nth-last-child(n)"] = false;
	//
	document.body.removeChild(i);
	////E:first-of-type	E:last-of-type	E:only-of-type	E:nth-of-type(n)E:nth-last-of-type(n)///
	///注：和上面一种的差别是其他类型元素如何计算
	///
	var i=document.createElement("div");
	document.body.appendChild(i);
	var tmp=document.createElement("p");
		i.appendChild(tmp);
	tmp=document.createElement("test4");
		i.appendChild(tmp);
	var answer_only=get_style(tmp,"color");
	for(var x=1;x<6;x++){
	var tmp=document.createElement("test4");
		i.appendChild(tmp);
	}
	iarray=i.getElementsByTagName("test4");
	
	/*for(var x=0;x<6;x++){
		result+=get_style(iarray[x],"color")+" ";
	}*/
	//
	if($gs(iarray[0],"color")=="rgb(10, 10, 10)")
		result["E:first-of-type"] = true;
	else
		result["E:first-of-type"] = false;
	//
	result["E:last-of-type"] = ($gs(iarray[5],"color") == "rgb(20, 20, 20)" ? true : false);
	//
	result["E:only-of-type"] = ($gs(iarray[0], "color") != "rgb(30, 30, 30)" && answer_only == "rgb(30, 30, 30)" ? true: false);
	//
	result["E:nth-of-type(n)"] = ($gs(iarray[2], "color") == "rgb(40, 40, 40)" ? true : false);
	//
	result["E:nth-last-of-type(n)"] = ($gs(iarray[4], "color") == "rgb(50, 50, 50)" ? true : false);
	//
	document.body.removeChild(i);
	///////////////     E:empty   /////////////////////////
	var i=document.createElement("div");
	i.className="empty";
	document.body.appendChild(i);
	var answer=get_style(i,"color");
	var tmp=document.createElement("test5");
		i.appendChild(tmp);
	result["E:empty"] = (answer=="rgb(10, 10, 10)" && $gs(i,"color") != "rgb(10, 10, 10)" ? true : false);
	document.body.removeChild(i);
	////////////   E:checked   /////////
	var i=document.createElement("input");
	document.body.appendChild(i);
	var i2=document.createElement("span");
	document.body.appendChild(i2);
	i.setAttribute("type","checkbox");
	//TODO may have sth wrong with IE8
		//i.type="checkbox";//这句在IE8出问题。。。
	i2.className="t7";
	var answer=get_style(i2,"color");
	i.checked="true";
	if(answer!="rgb(10, 10, 10)"&& get_style(i2,"color")=="rgb(10, 10, 10)")
		result["E:checked"] = true;
	else
		result["E:checked"] = false;
	document.body.removeChild(i);
	/////////////  E:enable   E:disable   ////////////////
	var i=document.createElement("input");
	document.body.appendChild(i);
	i.className="t8";
	var answer=get_style(i,"color");
	if(i.disabled=="")
		i.disabled="disabled";
	if(answer=="rgb(10, 10, 10)")
		result["E:enabled"] = true;
	else
		result["E:enabled"] = false;

	if(get_style(i,"color")=="rgb(20, 20, 20)")
		result["E:diabled"] = true;
	else
		result["E:diabled"] = false;
	document.body.removeChild(i);
	//////////   E:target       //////////
	result["E:target"] = "I have no idea";
	//TODO complement
	/*
	var i=document.createElement("div");
	document.body.appendChild(i);
	var i1=document.createElement("a");
	i1.id="f1";
	i1.innerText="sss";
	i1.href="#p1";
	var i2=document.createElement("p");
	i2.id="p1";
	i2.innerText="sjx";
	i2.className="t9";
	i.appendChild(i1);
	i.appendChild(i2);
	var lnk=document.getElementById("f1");
    if(lnk.click) {
		lnk.click();
	}
	else{
	  var e = document.createEvent('MouseEvent');
	  e.initEvent('click', false, false);
	  lnk.dispatchEvent(e);
	}
	result+=get_style(i2,"color");
	if(get_style(i2,"color")=="rgb(10, 10, 10)")
		result+="E:target : yes<br>";
	else
		result+="E:target : no<br>";	
	document.body.removeChild(i);*/
	return result;
}
function start_css3_selector_test(container)
{
	//var htmlContent = "";
	var E = {
		layerName: 	"CSS3 Selector",
		type: 		"aggrg",
		nlist: {
			rel_selector: 	{
				layerName: "Relationship Selector",
				type:		"aggrg",
				nlist: {}
			},
			attr_selector: 	{
				layerName: "Attribute Selector",
				type:		"aggrg",
				nlist: {}
			},
			pseudo_class_selector: 	{
				layerName: "Pseudo-Class Selector",
				type:		"aggrg",
				nlist: {}
			}
		}
	};
	result_relationship_selector(E.nlist.rel_selector.nlist);
	result_attribute_selector(E.nlist.attr_selector.nlist);
	result_pseudo_classes_selector(E.nlist.pseudo_class_selector.nlist);
	// get rid of the excess attribute for convenience
	return E;
}













